<template>
  <div class="income">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <el-row type="flex" align="middle" class="income-money">
      <div>
        <span class="text">我的收入</span>
        <span class="money">{{ incomeTotal | formatMoney }}</span>
      </div>
      <el-link :underline="false" type="primary" @click="viewIncome">查看明细</el-link>
    </el-row>
    <div class="balance-recharge">
      <div class="balance-title">提现</div>
      <el-row type="flex" class="recharge">
        <el-row type="flex" align="middle" class="item">
          <el-input
            type="number"
            class="input"
            maxlength="5"
            minlength="1"
            v-model="incomeInput"
            @input="handleBlurNumber"
            placeholder="输入提现金额"
            prefix-icon="edu-icon-fl-renminbi"
          ></el-input>
          <el-button type="text" size="mini" @click="handleBalanceTotal">全部提现</el-button>
        </el-row>
      </el-row>
      <div class="msg">注：提现到余额后不能再转至银行卡或支付宝，转账比例为{{ incomeRatio }}</div>
    </div>
    <div class="balance-choose">
      <div class="balance-title">提现方式</div>
      <edu-payment-choose
        :paymentList="incomePamentList"
        :payment="incomePamentVal"
        :balance="balanceTotal"
        :value.sync="incomePamentVal"
      ></edu-payment-choose>
    </div>
    <el-row type="flex" align="middle" justify="space-between" class="balance-deal">
      <div class="checked">
        <el-checkbox v-model="checked">我已阅读并同意</el-checkbox>
        <el-link type="primary" :underline="false" @click="handleKeyword('payment')"
          >《{{ getAgreementTitle('payment') }}》</el-link
        >
      </div>
      <el-row type="flex" align="middle" class="money">
        <div class="text">提现金额：</div>
        <div class="num">¥{{ incomeInput == '' ? 0 : total }}</div>
      </el-row>
    </el-row>
    <el-row type="flex" align="middle" justify="end">
      <el-button type="primary" @click="handleSubmit">下一步</el-button>
    </el-row>
    <!-- 弹窗 -->
    <IncomeAlipayPopup :visible.sync="alipayVisible" :money="total"></IncomeAlipayPopup>
    <IncomeWxpayPopup :visible.sync="wxpayVisible" :money="total"></IncomeWxpayPopup>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduPaymentChoose from '@/components/EduPaymentChoose'
import IncomeWxpayPopup from './components/incomeWxpayPopup'
import IncomeAlipayPopup from './components/incomeAlipayPopup'
import { mapGetters } from 'vuex'
export default {
  components: {
    MyTabs,
    EduPaymentChoose,
    IncomeAlipayPopup,
    IncomeWxpayPopup
  },
  inject: ['reload'],
  data() {
    return {
      tabList: [
        {
          path: '/my/finance/my_income',
          title: '推广收入'
        },
        {
          path: '/my/finance/my_course',
          title: '推广课程'
        },
        {
          path: '/my/finance/my_user',
          title: '推广用户'
        }
      ],
      checked: true,
      balanceTotal: 0,
      incomeTotal: 0,
      incomePamentList: [],
      incomePamentVal: '',
      incomeInput: '',
      incomeRatio: '',
      alipayVisible: false,
      wxpayVisible: false,
      routePath: this.$route.path
    }
  },
  mounted() {
    this.handleIncomeInfo()
  },
  computed: {
    ...mapGetters({
      getAgreementTitle: 'projectSetting/getAgreementTitle'
    }),
    total() {
      return this.handlewo()
    }
  },
  methods: {
    // 获取收入信息
    handleIncomeInfo() {
      this.$api.getIncome(res => {
        this.balanceTotal = res.data.balance
        this.incomeTotal = res.data.income
        this.incomeRatio = res.data.ratio
        this.incomePamentList = this.changeSort(res.data.encashment_way)
        const list = ['wxpay', 'alipay', 'lcnpay']
        const val = list.find(k => this.incomePamentList.includes(k))
        this.incomePamentVal = val || ''
      })
    },
    changeSort(arr) {
      arr.sort((a, b) => {
        var order = ['wxpay', 'alipay', 'lcnpay']
        return order.indexOf(a) - order.indexOf(b)
      })
      return arr
    },
    // 输入金额为自然数
    handleBlurNumber() {
      let boolenan = new RegExp('^[0-9]([0-9])*$').test(this.incomeInput)
      if (!boolenan) {
        this.incomeInput = ''
      }
    },
    // 自定义输入充值金额通用比例计算 - 保留两位小数
    handlewo() {
      /**
       * 比例 1:2
       * 实际到账 =  (输入金额 / 2) * 1
       */
      let num = 0
      let pop = this.incomeRatio.split(':')
      num = ((this.incomeInput / pop[1]) * pop[0]).toFixed(2)
      return num
    },
    // 全部体现
    handleBalanceTotal() {
      this.incomeInput = this.incomeTotal
    },
    // 下一步
    handleSubmit() {
      if (this.total > this.incomeTotal) {
        this.$message.error('余额不足')
        return
      }
      if (this.total == 0 || this.total < 0) {
        this.$message.error('请输入提现金额')
        return
      }
      if (!this.checked) {
        this.$message.warning('阅读并同意' + this.getAgreementTitle('payment'))
        return
      }

      if (this.incomePamentVal == 'lcnpay') {
        this.incomeLcnpay()
      } else if (this.incomePamentVal == 'alipay') {
        this.alipayVisible = true
      } else if (this.incomePamentVal == 'wxpay') {
        this.wxpayVisible = true
      }
    },
    // 查看协议
    handleKeyword(key) {
      this.$router.push({
        path: '/agreement/' + key
      })
    },
    // 提现到余额
    incomeLcnpay() {
      this.$api.createIncomeEncashmentBalance(
        {
          money: this.total
        },
        res => {
          this.$message.success(res.msg)
          this.incomeInput = ''
          this.handleIncomeInfo()
        },
        error => {
          this.$message.error(error.msg)
        }
      )
    },
    // 查看明细
    viewIncome() {
      this.$router.push({
        path: '/my/finance/income_detail'
      })
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.income {
  .income-money {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .text {
      font-size: 16px;
      color: $text-color-import;
    }
    .money {
      font-size: 16px;
      color: $text-color-price;
    }
  }
  .balance-title {
    font-size: 14px;
    color: $text-color-import;
  }
  .balance-recharge {
    margin-top: 25px;
    .recharge {
      flex-wrap: wrap;
      .item {
        margin-right: 12px;
        margin-top: 10px;
        &.el-radio {
          margin-right: 12px;
        }
        &.el-radio.is-bordered {
          + .el-radio.is-bordered {
            margin-left: 0;
          }
          width: 106px;
          height: 50px;
          padding: 0;
          position: relative;
          border-radius: 0;
          ::v-deep .el-radio__input {
            position: absolute;
            opacity: 0;
            top: 0;
          }
          ::v-deep .el-radio__label {
            height: 100%;
            padding-left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
          }
          .fill {
            font-size: 15px;
            color: $text-color-secondary;
            margin-bottom: 2px;
          }
          .send {
            font-size: 12px;
            color: #b7bac1;
          }

          .el-radio__input.is-checked + .el-radio__label .fill,
          .el-radio__input.is-checked + .el-radio__label .send {
            @include edu-color-auxiliary;
          }
        }
      }
      .input {
        width: 224px;
        margin-right: 20px;
        ::v-deep .el-input__inner {
          height: 50px;
          line-height: 50px;
          border-radius: 0;
          &::-webkit-outer-spin-button,
          &::-webkit-inner-spin-button {
            -webkit-appearance: none;
          }
          &[type='number'] {
            -moz-appearance: textfield;
          }
        }
        ::v-deep .el-input__prefix {
          font-size: 18px;
          color: $text-color-secondary;
        }
      }
    }
    .msg {
      color: #b7bac1;
      font-size: 12px;
      margin-top: 8px;
    }
  }
  .balance-choose {
    margin-top: 35px;
  }
  .balance-deal {
    margin-top: 40px;
    margin-bottom: 20px;
    .money {
      .text {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-auxiliary;
      }
      .num {
        font-size: 20px;
        color: $text-color-price;
      }
    }
  }
}
</style>
